import { ref, onMounted, onBeforeUnmount, watchEffect, unref } from "vue";

/**
 *
 * @param {*} selector 一个css选择器
 * @param {*} callback 一个回调
 * @returns
 */
// export function useClickOutside(selector, callback) {
//   const isClickOutside = ref(false);

//   function handle(event) {
//     const boxDom = document.querySelector(selector);

//     if (boxDom) {
//       if (boxDom.contains(event.target)) {
//         isClickOutside.value = false;
//       } else {
//         isClickOutside.value = true;
//       }

//       callback && callback(isClickOutside.value);
//     }
//   }

//   onMounted(() => {
//     document.addEventListener("click", handle);
//   });

//   onBeforeUnmount(() => {
//     document.removeEventListener("click", handle);
//   });

//   return isClickOutside;
// }

/**
 * dom - 是一个ref数据
 */
export function useClickOutside(dom, callback) {
  const isClickOutside = ref(false);

  // dom 是一个 ref 数据，实现一个监听的操作
  watchEffect((cleanUp) => {
    console.log("watchEffect");
    // 1. 对 dom 做 解包
    const domdom = unref(dom);

    // 2. 定义一个 click 事件的处理函数
    function handle(event) {
      console.log("click handle", event.target);

      if (domdom) {
        if (domdom.contains(event.target)) {
          // 点击的内层
          isClickOutside.value = false;
        } else {
          // 点击的外层
          isClickOutside.value = true;
        }

        callback && callback(isClickOutside.value);
      }
    }

    // 3. 对 document 进行点击事件的绑定
    document.addEventListener("click", handle, true);

    // end. 使用 cleanUp 做清理
    cleanUp(() => {
      document.removeEventListener("click", handle, true);
    });
  });

  return isClickOutside;
}
